<template>
  <div>
    <el-dialog
      v-model="visible"
      :title="dialogTitle"
      width="55%"
      :before-close="handleClose"
    >
      <el-form 
        ref="form" 
        :model="form" 
        label-width="120px"
        label-position="top"
        :rules="rules"
      >
        <el-form-item label="指标分类">
          <el-select v-model="form.groupId" style="width: 400px">
            <el-option
              v-for="item in evaGroup"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指标名称">
          <el-input v-model="form.title" style="width: 400px" placeholder="如“业务能力、学习能力”" />
        </el-form-item>
        <el-form-item label="评分类型">
          <el-radio-group v-model="form.type">
            <el-radio label="系统评分"></el-radio>
            <el-radio label="人工选择评分"></el-radio>
            <el-radio label="人工评语评分"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分数">
          <el-input v-model="form.score" style="width: 150px" placeholder="分数" />
        </el-form-item>
        <el-form-item label="评分说明">
          <el-input v-model="form.description" type="textarea" rows="6" show-word-limit maxlength="500"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="backBtn" @click="cancelHandle">取消</el-button>
          <el-button class="btn-color" @click="dataSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['evaItem'],
  data() {
    return {
      id: '',
      dialogTitle: '',
      visible: false,
      form: {
        groupId: '',
        oldGroupId: '',
        title: '',
        type: '',
        score: '',
        description: ''
      },
      evaGroup: [],
      rules: {
        selectedEvaGroup: { required: true, message: '请选择指标分类', trigger: 'blur'},
        title: { required: true, message: '请输入指标名称', trigger: 'blur'},
        type: { required: true, message: '请选择评分类型', trigger: 'blur'},
      }
    }
  },
  created() {
    
  },
  methods: {
    init(id) {
      this.id  = id
      this.visible = true
      // console.log(this.evaItem);
      this.getEvaGroup()
      if (id) {
        this.dialogTitle = '编辑指标'
        console.log('获取指标项');
        this.$http('evaluation/selectCheckListById', 'post', {id}, false, resp => {
          if (resp.code == 200) {
            let {data} = resp
            this.form = data
            if (this.form.type == 0) {
              this.form.type = '系统评分'
            } else if (this.form.type == 1) {
              this.form.type = '人工选择评分'
            } else {
              this.form.type = '人工评语评分'
            }
            this.form.oldGroupId = data.groupId
          }
        })
      } else {
        this.dialogTitle = '新增指标'
      }
    },
    dataSubmit() {
      // console.log(this.form);
      this.$refs['form'].validate(valid => {
        if (valid) {
          // if (this.form.type == '系统评分') {
          //   this.form.type = 0
          // } else if (this.form.type == '人工选择评分') {
          //   this.form.type = 1
          // } else {
          //   this.form.type = 2
          // }
          this.$emit('refrashData', {data: this.form, id: this.id})
          this.form = {}
          this.visible = false
        }
      })
    },
    // 取消
    cancelHandle() {
      this.form = {}
      this.visible = false
    },
    // 获取指标分类
    getEvaGroup() {
      let data = {
        page: 1,
        length: 20
      }
      this.$http('evaluation/selectEvaluationGroup', 'post', data, false, resp => {
        if (resp.code == 200) {
          this.evaGroup = resp.page.list
          // console.log(this.evaGroup);
        }
      })
    },
  },
  computed: {
    
  }
}
</script>

<style lang="scss" scoped>
@import './examEvaAdd.scss';
</style>